<!DOCTYPE html>
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="../include.js"></script>
<script>
    asyncTest(async done => {
        const box = document.getElementById("box");

        let resolve = null;
        function createResizeObserverPromise() {
            return new Promise(r => {
                resolve = r;
            });
        }

        const resizeObserver = new ResizeObserver(function (entries, ro) {
            if (this !== resizeObserver) {
                println("this is not the ResizeObserver instance inside callback");
            }
            if (ro !== resizeObserver) {
                println("observer argument is not the ResizeObserver instance inside callback");
            }

            for (let entry of entries) {
                const { width, height } = entry.contentRect;
                println(`Size changed: ${width}px x ${height}px`);
            }

            if (resolve) resolve();
        });

        let observerCallbackInvocation = createResizeObserverPromise();
        resizeObserver.observe(box);
        await observerCallbackInvocation;

        // Change size of box multiple times.
        // Observer callback is expected to be invoked only once.
        box.style.width = "300px";
        box.style.height = "300px";

        box.style.width = "400px";
        box.style.height = "400px";

        observerCallbackInvocation = createResizeObserverPromise();
        await observerCallbackInvocation;

        done();
    });
</script>
